<template>
    <div class="">
        <el-tabs v-model="activeName">
            <el-tab-pane label="项目介绍" name="1">
                <ProjectInfo :project="project"></ProjectInfo>
            </el-tab-pane>
            <el-tab-pane label="项目Host" name="2">
                <HostList :project="project"></HostList>
            </el-tab-pane>
            <el-tab-pane label="API接口" name="3">
                <ApiEntry :project="project"></ApiEntry>
            </el-tab-pane>
            <el-tab-pane label="测试用例" name="4">
                <CaseEntry :project="project"></CaseEntry>
            </el-tab-pane>
            <el-tab-pane label="任务列表" name="5">
                <TaskList :project="project"></TaskList>
            </el-tab-pane>
            <el-tab-pane label="运行记录" name="6">
                <RecordList :project="project"></RecordList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
    
<script>
import ProjectInfo from './ProjectInfo.vue';
import HosList from './HostList.vue'
import ApiEntry from './api/ApiEntry.vue';
import CaseEntry from "./Case/CaseEntry.vue"
import RecordList from "./Record/RecordList.vue"
import TaskList from "./TaskList.vue"

export default {
    data: () => ({
        activeName: "1",
        project: {}
    }),
    //注册引入的组件
    components: {
        ElMessage,
        [ProjectInfo.name]: ProjectInfo,
        HosList,
        ApiEntry,
        CaseEntry,
        RecordList,
        TaskList
    },
    // 生命周期函数请求项目详情
    mounted() {
        const project_id = this.$route.params.project_id
        this.$http.getProjectDetail(project_id).then(res => {
            const project = res.data
            this.project = project
            console.log(this.project);
        })
    },
    methods: {

    }
}

</script>
    
<style scoped lang='scss'></style>